import pinsItemLess from "./pinsItem.module.less";
import PinsLabel from "../pinsLabel/pinsLabel";
import PinUrl from "../pinUrl/pinUrl";
import PinsLikeHeader from "../pinsLikeHeader/pinsLikeHeader";
import PreviewPictures from "../../components/previewPictures/previewPictures";
import { Popover } from "antd";
import { formatRelativeTime } from "@/utils/PublicFunction";
import { useState } from "react";

function PinsItem(prop: any) {
  const shieldAuthor = () => {};
  const reportPins = () => {};
  const [showAll, setShowAll] = useState(false);

  const content = (
    <div className={pinsItemLess.popoverMenu}>
      <div className="menuContent" onClick={shieldAuthor}>
        <div className="left_icon">
          <div className="icon iconfont icon-pingbiyonghu"></div>
        </div>
        <div className="rightname">屏蔽作者：{prop.item.UserName}</div>
      </div>
      <div className="menuContent" onClick={reportPins}>
        <div className="left_icon">
          <div className="icon iconfont icon-jubao"></div>
        </div>
        <div className="rightname">举报</div>
      </div>
    </div>
  );
  return (
    <>
      <div className={pinsItemLess.pinsItemContent}>
        <div className="topPaddingContent">
          <div className="topHeaderMessage">
            <div className="left_user_info">
              <div className="leftheaderImg">
                <img src={prop.item.HeaderImg} alt="" />
              </div>
              <div className="right_user_other_info">
                <div className="topName">{prop.item.UserName}</div>
                <div className="bottom_other">
                  <div className="autograph">{prop.item.SelfDescription}</div>
                  <div className="point">·</div>
                  <div className="time">
                    {formatRelativeTime(prop.item.PublishTime)}
                  </div>
                </div>
              </div>
            </div>
            <div className="right_op">
              <Popover placement="bottomRight" title={null} content={content}>
                <div className="icon iconfont icon-gengduo"></div>
              </Popover>
            </div>
          </div>
          <div className="center_content">
            <div className="left_empty"></div>
            <div className="right_input_content">
              <div className="inputContent">
                <div className="text">
                  {prop.item.PinContent.length > 100 && !showAll
                    ? prop.item.PinContent.slice(0, 100) + "..."
                    : prop.item.PinContent}
                </div>
                <div
                  className="tipsBtn"
                  onClick={() =>
                    setShowAll((pre) => {
                      return !pre;
                    })
                  }
                >
                  {prop.item.PinContent.length > 100
                    ? showAll
                      ? "收起"
                      : "展开"
                    : ""}
                </div>
              </div>
              {prop.item.Attachments.length > 0 && (
                <div className="imgContent">
                  <PreviewPictures Attachment={prop.item.Attachments} />
                </div>
              )}
              {prop.item.UrlTitle && (
                <div className="urlAddress">
                  <PinUrl
                    closeShow={false}
                    urlTitle={prop.item.UrlTitle}
                    realyUrl={prop.item.RealyUrl}
                  />
                </div>
              )}

              <div className="bottom_labelAndLike">
                <div className="label">
                  {prop.item.CircleTitle && (
                    <PinsLabel LabelName={prop.item.CircleTitle} />
                  )}
                </div>
                <div className="like">
                  <PinsLikeHeader />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="bottom_op">
          <div className="opItems">
            <div className="icon iconfont icon-fenxiang"></div>
            <div className="name">分享</div>
          </div>
          <div className="opItems">
            <div className="icon iconfont icon-31pinglun"></div>
            <div className="name">评论</div>
          </div>
          <div className="opItems">
            <div className="icon iconfont icon-dianzan_huaban"></div>
            <div className="name">点赞</div>
          </div>
        </div>
      </div>
    </>
  );
}

export default PinsItem;
